import Controller from './Controller';
import GUI from './GUI';

export default class TextAreaController extends Controller {

	constructor( parent, object, property, config ) {
		if(config == null) config = {} ;
		super( parent, object, property, 'textarea', 'div', config );


		this.$input = document.createElement( 'textarea' );
		this.$input.setAttribute( 'type', 'text' );
		this.$input.setAttribute( 'spellcheck', 'false' );
		this.$input.setAttribute( 'aria-labelledby', this.$name.id );

		this.$input.addEventListener( 'input', () => {
			this.setValue( this.$input.value );
		} );

		this.$input.addEventListener( 'blur', () => {
			this._callOnFinishChange();
		} );

		this.$input.addEventListener( 'keydown', e => {
			if(GUI.onKeydown != null) GUI.onKeydown(e,this.$input,this) ;
		} );

		this.$input.addEventListener( 'keyup', e => {
			if(GUI.onKeyup != null) GUI.onKeyup(e,this.$input,this) ;
		} );

		this.$widget.appendChild( this.$input );

		this.flexPanel = null ;

		this._appendEndDomHtml(config.endHtml) ;
		// let endHtml = config.endHtml ;
		// if(endHtml != null && endHtml != ""){
		// 	this.$span = document.createElement( 'span' );
		// 	this.$span.classList.add("lilInlineEndSpan") ;
		// 	this.$widget.appendChild( this.$span );
		//
		// 	this.$span.innerHTML = endHtml ;
		// }

		this.$disable = this.$input;

		this.updateDisplay();

	}

	addIcon(icon,title,func){
		if(this.flexPanel == null) {
			this.flexPanel = document.createElement( 'div' );
			this.flexPanel.classList.add( 'textareaFlexPanel' );
			this.$widget.appendChild( this.flexPanel );
		}
		let iconDom = document.createElement( 'i' );
		iconDom.setAttribute("class",icon) ;
		if(title != null && title != "")
			iconDom.setAttribute("title",title) ;
		iconDom.classList.add( 'textareaFlexItem' );
		const that = this ;
		iconDom.addEventListener( 'click', e => {
			if(func != null)
				func(e,that) ;
		} );
		this.flexPanel.appendChild( iconDom );
		return this ;
	}

	/**
	 * 放大编辑，这个是web设计器定制的
	 * @param func
	 * @returns {TextAreaController}
	 */
	addIcon_Full(func){
		return this.addIcon("layui-icon layui-icon-screen-full commonIconClick","放大编辑",func) ;
	}

	triggerValueChange(){
		this.setValue( this.$input.value );
		this._callOnFinishChange();
		return this ;
	}

	placeholder(str) {
		if(str == null || str == "") return this ;
		this.$input.setAttribute("placeholder",str) ;
		this.tooltip(str) ;
		return this ;
	}

	updateDisplay() {
		let _v = this.getValue() ;
		if(_v == null) _v = "" ;
		this.$input.value = _v ;
		return this;
	}

	setStyle(style){
		if(style == null) return this ;
		if(this.$input == null) return this;
		this.$input.setAttribute("style",style) ;
		return this ;
	}

	addClass(clazz){
		if(clazz == null || clazz == "") return this ;
		if(this.$input == null) return this;
		this.$input.classList.add(clazz) ;
		return this ;
	}

	removeClass(clazz){
		if(clazz == null || clazz == "") return this;
		if(this.$input == null) return this;
		this.$input.classList.remove(clazz) ;
		return this ;
	}

	on(eventType,func){
		if(eventType == null || eventType == "") return ;
		if(func == null) return ;
		const that = this ;
		let _v = this.getValue() ;
		if(_v == null) _v = "" ;
		this.$input.addEventListener(eventType,function(event){
			func(event,that,_v,that.$input) ;
		}) ;
	}
}
